<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
      class="demo-ruleForm login-container">
      <h3 class="title">智慧园区管理平台登陆</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm.username" auto-complete="off" prefix-icon="myicon myicon-user" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" prefix-icon="myicon myicon-key" placeholder="密码"></el-input>
      </el-form-item>
      <el-row>
        <el-col>
          <el-form-item prop="code" style="position: relative;">
            <el-input type="text" style="width: 50%;position: absolute;" v-model="ruleForm.code" auto-complete="off"
              placeholder="图形验证码" @keyup.enter.native="loginSubmit('ruleForm')"></el-input>
            <div class="verify-box" @click="refreshCode">
              <img :src="formData.imgUrl" alt="" style="float: right;">
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="loginSubmit('ruleForm')" :loading="logining">登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
  import {
    checkUser,
    checkUserImg
  } from '@/api'
  // import SIdentify from '../components/page/identify'
  export default {
    name: 'login',
    data() {
      return {
        logining: false,
        rememberpwd: false,
        formData:{
          imgUrl:''
        },
        ruleForm: {
          //username和password默认为空
          username: '',
          password: '',
          code: '',
          key:'1'
        },
        checked: false,
        identifyCodes: '1234567890',
        identifyCode: '',
        //rules前端验证
        rules: {
          username: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        },
        passwordType: 'password'
      }
    },
    components: {
      // SIdentify
    },
    mounted() {
      // 验证码初始化
      // this.identifyCode = ''
      // this.makeCode(this.identifyCodes, 4)
      this.makeImg()
    },
    computed: {},
    props: [],
    methods: {
      loginSubmit(formName) {
          this.$refs[formName].validate(valide => {
            // 只有校验通过，才执行函数
            console.log(valide)
            if (valide) {
              console.log(this.ruleForm)
              checkUser(this.ruleForm).then(res => {
                console.log(res)
                // 如果成功要跳转至首页, 将token保存到localStorage
                if (res.status === 0) {
                  localStorage.setItem('mytoken', res.data)
                  var time =  Date.parse(new Date())
                  localStorage.setItem('time', time)
                  console.log(123)
                  this.$router.push({name: 'Home'})
                } else {
                  this.refreshCode()
                  // 如果失败，展示提示信息
                  this.$message({
                    type: 'error',
                    message: res.message
                  })
                }
              })
            } else {
              alert('校验不通过')
            }
          })
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 切换验证码
      refreshCode() {
        this.makeImg()
      },
      makeImg(){
        this.ruleForm.key = Date.parse(new Date());
        console.log(this.ruleForm.key)
            checkUserImg(this.ruleForm.key).then(res => {
                   this.formData.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
                   console.log(this.formData.imgUrl)
            })
      }
    }
  }
  

</script>
<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* padding-top: 10%; */
    background-image: url('https://wisdom-city.oss-cn-hangzhou.aliyuncs.com/park/c3089221-7174-4b0c-9fff-df32ff72bdfb.jpg');
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center center;
    /* background-size: 100% 0; */
    position: relative;
  }

  .login-container {
    border-radius: 10px;
    /* margin: 0 auto; */
    width: 300px;
    padding: 20px 15px 1px 20px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translate(0, -50%);
  }

  .title {
    margin: 0px auto 20px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }

  .code-box {
    text-align: right;
  }

  .codeimg {
    height: 40px;
  }

</style>
